.data-structure {
  height: 100%;
  &-content {
    height: ~"calc(100% - 80px)";
    padding: 20px 0;
    .left-area {
      padding: 10px;
      float: left;
      width: 49.5%;
      height: 100%;
      min-height: 500px;
      overflow-y: auto;
      border: 1px solid #dcdee2;
    }
    .right-area {
      padding: 10px;
      float: right;
      width: 49.5%;
      height: 100%;
      min-height: 500px;
      overflow-y: auto;
      border: 1px solid #dcdee2;
    }
    .option-box {
      margin-bottom: 10px;
      .subtitle {
        font-size: 14px;
        float: left;
      }
      .btn-box {
        float: right;
        .ivu-btn {
          margin-right: 4px;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

  /* 新增数据modal框样式 */
  .add-newdata-modal {
    .ivu-modal-body {
      padding: 0;
      .add-newdata-tab {
        .ivu-tabs-tabpane {
          padding: 0 16px 16px;
          min-height: 300px;
          max-height: 400px;
          overflow-x: hidden;
          overflow-y: auto;
        }
        .general-data-tab {
          .filter-board {
            display: flex;
            align-items: center;
            padding-bottom: 16px;
            justify-content: space-between;
            & > b {
              width: 70px;
            }
          }
        }
      }
    }
    /* 自定义底部footer */
    .solt-div {
      border-top: 1px solid #e8eaec;
      padding: 12px 18px 12px 18px;
      text-align: right;
    }
  }

  /* 编辑衍生规则modal框样式 */
  .add-derivative-modal {
    .ivu-modal-body {
      background: #eee;
    }
    .derivative-content {
      display: flex;
      .left-content {
        flex: 1;
        margin-right: 4px;
        & > li {
          padding: 10px;
          border: 1px solid #fff;
          &:not(:last-child) {
            border-bottom: 0;
          }
        }
        .class-box {
          max-height: 200px;
          overflow-y: auto; 
          .data-item {
            width: 90px;
            margin: 5px 10px;
          }
        }
      }
      .right-content {
        flex: 1;
        border: 1px solid #fff;
        // 视图模式
        .view-model {
          padding: 20px;
        }
        // 源码模式
        .code-model {
          width: 100%;
          height: 100%;
        }
        /* tag自定义样式 */
        .view-tag {
          padding-right: 0;
          color: rgb(64, 158, 255);
          border: none;
          background: none;
          &:hover {
            border-bottom: 1px solid #409eff;
          }
          &:hover > .ivu-icon-ios-close {
            opacity: 1;
            color: red;
          }
          .ivu-tag-text {
            color: inherit;
          }
          .ivu-icon-ios-close {
            opacity: 0;
          }
        }
        .active-tag {
          background-color: #2d8cf0;
          color: #fff;
        }
      }
      .filter-board {
        display: flex;
        align-items: center;
        & > b {
          min-width: 80px;
        }
      }
    }
    .derivative-footer {
      .left-btn {
        float: left;
      }
      .right-btn {
        float: right;
      }
    }
  }
}